<template>

    <div ref="salesRef" class="charts" :style="{height: height+'px'}"></div>

</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, Ref, ref} from "vue";
import {simpleGet} from "@/utils/request";

const props = defineProps({
    height:{type:Number, default: 300}
})
const salesRef = ref() as any
const userSort = ref<any[]>([])

onMounted(() => {

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(salesRef.value!);
// 绘制图表
    myChart.setOption({
        title: {
            text: '近十五天销售额'
        },
        tooltip: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [
            {
                name: '金额',
                type: 'bar',
                data: []
            }
        ]
    });

    // 异步加载数据
    simpleGet("/index/amountCharts").then(({days, amounts}) => {
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: days
            },
            series: [
                {
                    // 根据名字对应到相应的系列
                    name: '金额',
                    data: amounts
                }
            ]
        });
    })

})
</script>

<style scoped lang="scss">

</style>